<template>
  <!-- <a-row>
      <h2 style="text-align: center">{{ tableTitle }}</h2>
      <h3 style="text-align: center">{{ tableSemester }}</h3>
    </a-row>
    <a-row>
      <a-spin :spinning="spin_status" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="scheduleData"
          :pagination="false"
          bordered
          rowKey="scheduleTitle"
        >
        </a-table>
      </a-spin>
    </a-row>-->
  <div>
    <div class="cs-lt">
      <div class="cs-lt-header">
        <div class="cs-lt-header-grid">
          <div
            class="cs-lt-header-grid-hide"
            :style="{ backgroundColor: transparent }"
          >
            &nbsp;&nbsp;
          </div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期一🌙</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期二🔥</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期三🌊</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期四🪵</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期五⭐️</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期六🏀</div>
        </div>
        <div class="cs-lt-header-grid">
          <div class="cs-lt-header-grid-label">星期日🌕</div>
        </div>
      </div>
      <div class="cs-lt-body">
        <div class="cs-lt-body-left">
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第一节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第二节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第三节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第四节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第五节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第六节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第七节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第八节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第九节</div>
          </div>
          <div class="cs-lt-body-left-nav">
            <div class="cs-lt-body-left-nav-label">第十节</div>
          </div>
        </div>
        <div class="cs-lt-body-right">
          <div
            v-for="(course, index) in courseTableData"
            :key="index"
            class="cs-lt-body-right-block"
            :style="{
              gridColumn: `${course.show.colStart}/${course.show.colEnd}`,
              gridRow: `${course.show.rowStart}/${course.show.rowEnd}`,
              backgroundImage: `${course.show.styleColor}`,
            }"
          >
            <div class="cs-lt-body-right-block-cs">
              {{ course.show.course_name }}
            </div>
            <div class="cs-lt-body-right-block-te">
              {{ course.show.teacherName ? course.show.teacherName : "" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <table border="1" width="100%" align="center" class="table">
      <thead class="table_thead">
        <tr class="table_thead_tr">
          <td width="12%" v-for="headData in columns" :key="headData.dataIndex">
            {{ headData.title }}
          </td>
        </tr>
      </thead>
      <tbody class="table_tbody">
        <tr
          class="table_tbody_tr"
          v-for="(element, index) in scheduleData"
          :key="index"
        >
          <td
            :style="{
              backgroundColor: `${element.styleColor}`,
            }"
          >
            {{ element.scheduleTitle }}
          </td>
          <td
            :style="{
              backgroundColor: element.monday.styleColor,
            }"
          >
            {{ element.monday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.tuesday.styleColor,
            }"
          >
            {{ element.tuesday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.wednesday.styleColor,
            }"
          >
            {{ element.wednesday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.thursday.styleColor,
            }"
          >
            {{ element.thursday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.friday.styleColor,
            }"
          >
            {{ element.friday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.saturday.styleColor,
            }"
          >
            {{ element.saturday.showName }}
          </td>
          <td
            :style="{
              backgroundColor: element.sunday.styleColor,
            }"
          >
            {{ element.sunday.showName }}
          </td>
        </tr>
      </tbody>
    </table> -->
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    courseTableData: {
      type: Array,
    },
  },
  computed: {
    ...mapState({
      Tree_spin_status: (state) => state.admin.Tree_spin_status,
      spin_status: (state) => state.admin.spin_status,
    }),
  },
  //
  // watch: {
  //   courseTableData(val) {
  //     try {
  //       // console.log("---val---");
  //       // console.log(val);
  //       // 标题
  //       let nextyear = Number(val[0].match.year) + 1;
  //       this.tableTitle =
  //         val[0].show.building_name + "-" + val[0].show.room_name;
  //       this.tableSemester =
  //         val[0].match.year +
  //         "-" +
  //         nextyear +
  //         "第" +
  //         val[0].match.semester +
  //         "学期";

  //       this.scheduleData = [
  //         {
  //           scheduleTitle: "第1节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第2节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第3节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第4节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第5节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第6节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第7节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第8节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第9节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //         {
  //           scheduleTitle: "第10节",
  //           monday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           tuesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           wednesday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           thursday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           friday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           saturday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //           sunday: {
  //             styleColor: "",
  //             showName: "",
  //           },
  //         },
  //       ];
  //       val.map((item) => {
  //         for (let i = 0; i <= item.match.order.length; i++) {
  //           let courseTime = Number(item.match.order.pop()) - 1;
  //           if (item.match.date === "Mon") {
  //             this.scheduleData[courseTime].monday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].monday.styleColor =
  //               item.show.styleColor;
  //           } else if (item.match.date === "Tue") {
  //             this.scheduleData[courseTime].tuesday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].tuesday.styleColor =
  //               item.show.styleColor;
  //           } else if (item.match.date === "Wed") {
  //             this.scheduleData[courseTime].wednesday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].wednesday.styleColor =
  //               item.show.styleColor;
  //           } else if (item.match.date === "Thu") {
  //             this.scheduleData[courseTime].thursday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].thursday.styleColor =
  //               item.show.styleColor;
  //           } else if (item.match.date === "Fri") {
  //             this.scheduleData[courseTime].friday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].friday.styleColor =
  //               item.show.styleColor;
  //           } else if (item.match.date === "Sat") {
  //             this.scheduleData[courseTime].saturday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].saturday.styleColor =
  //               item.show.styleColor;
  //           } else {
  //             this.scheduleData[courseTime].sunday.showName =
  //               item.show.course_name + "(" + item.show.week + ")";
  //             this.scheduleData[courseTime].sunday.styleColor =
  //               item.show.styleColor;
  //           }
  //         }
  //         // item.match.order.pop()
  //         // console.log(item.match.order);
  //         console.log(this.scheduleData);
  //       });
  //     } catch (err) {
  //       // console.log(err);
  //       this.$message.error("没有排课");
  //       this.tableTitle = "";
  //       this.tableSemester = "";
  //       this.scheduleData = [
  //         {
  //           scheduleTitle: "第1节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第2节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第3节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第4节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第5节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第6节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第7节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第8节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第9节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //         {
  //           scheduleTitle: "第10节",
  //           monday: "",
  //           tuesday: "",
  //           wednesday: "",
  //           thursday: "",
  //           friday: "",
  //           saturday: "",
  //           sunday: "",
  //         },
  //       ];
  //     }
  //   },
  // },
  data() {
    return {
      // 显示标题
      tableTitle: "",
      colStart: 1,
      colEnd: 2,
      rowStart: 1,
      rowEnd: 3,

      colStart1: 3,
      colEnd1: 4,
      rowStart1: 4,
      rowEnd1: 5,

      ce: "#aaa",
      columns: [
        {
          title: " ",
          dataIndex: "scheduleTitle",
          align: "center",
          width: "9%",
        },
        {
          title: "星期一",
          dataIndex: "monday",
          align: "center",
        },
        {
          title: "星期二",
          dataIndex: "tuesday",
          align: "center",
        },
        {
          title: "星期三",
          dataIndex: "wednesday",
          align: "center",
        },
        {
          title: "星期四",
          dataIndex: "thursday",
          align: "center",
        },
        {
          title: "星期五",
          dataIndex: "friday",
          align: "center",
        },
        {
          title: "星期六",
          dataIndex: "saturday",
          align: "center",
        },
        {
          title: "星期日",
          dataIndex: "sunday",
          align: "center",
        },
      ],
      // scheduleData: [
      //   {
      //     scheduleTitle: "第1节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第2节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第3节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第4节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第5节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第6节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第7节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第8节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第9节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      //   {
      //     scheduleTitle: "第10节",
      //     monday: "",
      //     tuesday: "",
      //     wednesday: "",
      //     thursday: "",
      //     friday: "",
      //     saturday: "",
      //     sunday: "",
      //   },
      // ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.btn-area {
  padding-bottom: 10px;
}
</style>
